<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华为手表布局</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <!--
        网址：https://consumer.huawei.com/cn/wearables/watch-gt-cyber/
    -->
    <div class="box">
        <div class="content">
            <div class="content-child">
                <img src="./img/1.png" style="
                height: 100%;
            ">
                <div class="meat">
                    <h2>闪变换壳</h2>
                    <p>多款潮酷表壳轻松切换，自由风格我定义</p>
                </div>
            </div>
            <div class="content-child"> <img src="./img/2.png">
                <div class="meat">
                    <h2>军规品质</h2>
                    <p>通过 16 项高强度军规测试，轻松驾驭各种场景</p>
                </div>
            </div>
            <div class="content-child"> <img src="./img/3.png">
                <div class="meat">
                    <h2>潮趣表盘</h2>
                    <p>专属主题，穿搭表盘、万花筒表盘，玩出腕上花样</p>
                </div>
            </div>
            <div class="content-child"><img src="./img/4.png">
                <div class="meat">
                    <h2>智慧生活</h2>
                    <p>支持微信手表版、支付出行、蓝牙通话等
                    </p>
                </div>
            </div>
            <div class="content-child"><img src="./img/5.png">
                <div class="meat">
                    <h2>潮酷运动</h2>
                    <p>解锁滑雪、滑板、骑行等 100+ 运动模式</p>
                </div>
            </div>
            <div class="content-child"><img src="./img/6.png">
                <div class="meat">
                    <h2>健康监测</h2>
                    <p>支持心率、血氧、睡眠、压力等专业健康监测</p>
                </div>
            </div>
        </div>
    </div>
    <style>
        .content {
            display: grid;
            /*设置行与行,列与列的间隔*/
            grid-gap: 10px;
            /*四列列宽*/
            grid-template-columns: 70px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            /*三横宽*/
            grid-template-rows: 193px 201px 185px;
            /*先行后列排序*/
            grid-auto-flow: row dense;
        }

        .content>div {

            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 150%;
            background-color: #151515;
            color: #fff;
            border-radius: 18px;
        }


        .content .content-child:nth-child(1) {
            grid-column: 1 / span 4;
            grid-row: 1 / span 2;
        }

        .content .content-child:nth-child(2) {
            grid-column: 5 / span 8;
        }

        .content .content-child:nth-child(3) {
            grid-column: 5 / span 4;
        }

        .content .content-child:nth-child(4) {
            grid-column: 9 / span 4;
        }

        .content .content-child:nth-child(5) {
            grid-column: 1 / span 6;
        }

        .content .content-child:nth-child(6) {
            grid-column: 7 / span 6;
        }



        .box {
            max-width: 900px;
            margin: 0 auto;
        }
    </style>
</body>

</html>